<template>
  <div class="huanying">
    <header>
    <div class="left"><router-link to="/lianxi"><img src="../assets/img/未标题-2.png" ></router-link></div>
      <div class="center">个人信息</div>
      <div class="right"></div>
    </header>
   <main>
   <div class="top">
   <img src="../assets/img/zuihou-tou.png" >
   
   </div>
  <div class="center">
    <p>刘嘉玲 <img src="../assets/img/nan-nv.png"></p>
  </div>
  
   </main>
   <footer>
   <div class="he">
     <div class="mima">
        修改密码
     </div>
     <p>未绑定手机号</p>
     <div class="bangding">
       绑定手机
     </div>
     <div class="tuichu">
       退出登陆
     </div>
     </div>
   </footer>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'xinxi',
  data () {
    return {
      msg: '最火帖子'
    }
  }
}
</script>
<style scoped lang="less">
  @import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';

  .huanying{
    width: 100%;
    height: 100%;
    
  }
   header {
    .height(150);
    position: fixed;
    top: 0;
    width: 100%;
    background:#1a1a1a;
    display: flex;
    text-align: center;
    align-items: center;
      .left,.right{
        display: flex;

        .width(80);
        img{
          .height(30);
          display: block;
          margin: auto;

        }
      }
      .center{
       flex:1;
        .font-size(60);
        color: #be8f59;
      }
    }
  main{
    height: 100%;
   .padding(150,0,0,0);
   
   .top{
    
    .padding(30,0,0,0);
    img{
      .width(250);
      display: block;
      margin: 0 auto;
    }
   
   }
   .center{
    display: flex;
     .padding(20,0,0,0);
    p{
      margin: auto;
      .font-size(21);
      img{
        .width(24);
      }
    }
   }
    
  }
  footer{
    

    color:#8e6d46;
    position: fixed;
    bottom: 0;
    width: 100%;
    .he{.padding(0,20,10,20) ;
    p{
  .line-height(50);
    }
    div{

      .margin(0,20,10,20) ;
      .height(80);
      .font-size(26);
      background: black;
      text-align: center;
      .line-height(80); 
      .margin(0,0,20,0); 
      .border-radius(10);
    }}
  }
 </style>
